<template>
    <div v-for="(item, i) in batchPicturesArr" :key="i">
      <div id="geth" class="batch">
        <!-- 图片 -->
        <div style="width: 100%">
          <img :id="'img'+i" :src="item.imgUrl" style="width: 100%;margin-top: 40px;" />
        </div>
        <!-- 表单 -->
        <div style="width: 100%">
          <el-form ref="item" :model="batchPicturesArr" label-position="right" label-width="85px">
            <el-form-item label="所属网点:">
             所属网点
            </el-form-item>
            <el-form-item label="评检项:">
              <el-select v-model="item.workorder_type" filterable reserve-keyword placeholder="工单类型" style="width: 100%" clearable >
                <el-option-group v-for="group in list_workorder" :key="group.id" :label="group.name">
                  <el-option v-for="item in group.items" :key="item.id" :label="item.name" :value="item.id" />
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="优先级:">
              <el-select v-model="item.priority" filterable reserve-keyword placeholder="优先级" style="width: 100%" clearable >
                <el-option v-for="item in list_priority" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="处理时限:">
              <el-date-picker :default-value="new Date()" :picker-options="pickerOptions0" v-model="item.dealWithTime" style="width: 100%" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />
            </el-form-item>
            <el-form-item label="指派给:">
              <el-select v-model="item.dealWithUserId" filterable reserve-keyword placeholder="指派给" style="width: 100%" clearable >
                <el-option v-for="item in list_user" :key="item.id" :label="item.realName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="抄送至:">
              <el-select v-model="item.copyUserId" filterable reserve-keyword placeholder="抄送至" style="width: 100%" clearable >
                <el-option v-for="item in list_user" :key="item.id" :label="item.realName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入备注" ref="wk_form_remark" key="remark" v-model="item.remark" name="remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 分隔线 -->
      <div class="separationLine"></div>
    </div>
    <!-- 按钮 -->
    <div class="buttom">
        <el-button class="plain-btn">取消</el-button>
        <el-button class="fill-btn" @click="submit">提交</el-button>
    </div>
</template>

<script>
import AddrBranch from "@/components/Address/AddrBranchSelectRegister.vue"
import { workorderAdd, uploadWkImg} from '@/api/workorder'
export default {
  props: [
    // base64图片数组
    'batchPicturesArr'
  ],
  components: {
    AddrBranch
  },
  data() {
    return {
      // 打开是否
      dialog_visible: false,
      innerVisible: false,
      // 传来的数组下标
      cache: '',
      // 缓存编辑后的图片
      afterEditing: '',
      // 时限限制
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      // 工单类型
      list_workorder: [],
      // 优先级
      list_priority: [{id:1, label: '高(1天)'}, {id: 2, label: '中(2天)'}, {id: 3, label: '低(7天)'}],
      // 处理指派人员
      list_user: ''
    }
  },
  methods: {
    // 打开
    open() {
      this.list_workorder = this.$store.getters.list_workorder || []
      this.list_user = this.$store.getters.list_user || []
      this.dialog_visible = true
      this.$parent.multiGraphCancellation()
    },
    // 关闭
    close() {
      this.dialog_visible = false
    },
    // 网点选择
    Network(code, level, newval) {
      this.batchPicturesArr[i].pointId = newval[5]
    },
    // 编辑图片
    editMultiGraph(i) {
      this.innerVisible = true
      this.cache = i
    },
    // 内层的打开回调
    innerVisibleshow() {
      this.$nextTick(() => {
        var myCanvas = document.getElementById('myCanvas')
        var Canvas2D = myCanvas.getContext('2d')

        var setw = document.getElementById('getw')
        var seth = document.getElementById('geth')

        console.log('宽高 :>> ', setw.offsetWidth, seth.offsetHeight)

        myCanvas.width = setw.offsetWidth
        myCanvas.height = seth.offsetHeight

        let img = new Image()
        img.src = this.batchPicturesArr[this.cache].imgUrl

        img.onload = () => {
          const Atrament = require('atrament')
          const huabi = new Atrament(myCanvas, {
            width: setw.offsetWidth,
            height: seth.offsetHeight,
            color: 'red',
          })

          this.afterEditing = huabi

          Canvas2D.drawImage(img, 0, 0, myCanvas.width, myCanvas.height)
        }
      })
    },
    // 确认编辑
    confirmEdit() {
      this.batchPicturesArr[this.cache].imgUrl = this.afterEditing.toImage()
      this.innerVisible = !this.innerVisible
    },
    // 提交
    submit() {
      var Rdata = []
      this.batchPicturesArr.forEach(element => {
        element.checkItemIds.push(element.workorder_type)
        Rdata.push(
          {
            // 网点 (现在在等回显)
            pointId: '123456',
            // 处理人
            dealWithUserId: element.dealWithUserId,
            // 抄送人
            copyUserId: element.copyUserId,
            // 处理时间
            dealWithTime: element.dealWithTime,
            // 优先级
            priority: element.priority,
            // 备注
            remark: element.remark,
            // 图片类型
            pictureType: 'rectify-before',
            // 图片base64
            base64Picture: element.imgUrl,
            // 通道id和设备id
            workOrderDeviceChannels: element.workOrderDeviceChannels,
            // 问题项id
            checkItemIds: element.checkItemIds,
          }
        )
      })
      console.log('封装前的请求参数 :>> ', this.batchPicturesArr)
      console.log('封装后的请求参数 :>> ', Rdata)

      // 添加的请求
      // workorderAdd()
      // .then(res => {

      // })
      // .catch(res => {

      // })
    }
  }
}
</script>

<style scope>
  .batch {
    display: flex;
  }
  .separationLine {
    width: 100%;
    height: 1px;
    border-top: 1px solid #535252;
    margin-bottom: 30px;
  }
  .buttom {
    display: flex;
    justify-content: center;
  }
</style>
